"use strict";
const path = require("path");
const Timestamp = new Date().getTime();
const resolve = (dir) => path.join(__dirname, dir);
let { VUE_APP_CURRENTMODE } = process.env;
//主题配置文件
const modifyVars = require("./src/theme/compileFiles/theme");
//导入全局环境配置
let { NODE_ENV } = process.env;
module.exports = {
  publicPath: VUE_APP_CURRENTMODE == "build" ? "/dashboard/" : "/",
  outputDir: `dist`, //构建文件的目录
  lintOnSave: false, //是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  runtimeCompiler: true, // 使用运行时编译器的 Vue 构建版本,减少包的体积
  productionSourceMap: false, //是否开启生产环境sourceMap
  configureWebpack: (config) => {
    config.output.filename = `js/[name].${Timestamp}.js`;
    config.output.chunkFilename = `js/[name].${Timestamp}.js`;
    //路径别名
    Object.assign(config.resolve, {
      alias: {
        vue: "vue/dist/vue.esm.js",
        "@": resolve("src"),
      },
    });
  },
  css: {
    loaderOptions: {
      less: {
        modifyVars,
        javascriptEnabled: true,
      },
    },
    extract: {
      filename: `css/[name].${Timestamp}.css`,
      chunkFilename: `css/[name].${Timestamp}.css`,
    },
  },
  //修改webpack配置
  chainWebpack: (config) => {
    const CompressionWebpackPlugin = require("compression-webpack-plugin");
    if (VUE_APP_CURRENTMODE === "build") {
      config.plugin("CompressionPlugin").use(
        new CompressionWebpackPlugin({
          filename: "[path].gz[query]",
          test: /\.(js|css)$/,
          threshold: 10240, // 超过10kb的文件就压缩
          deleteOriginalAssets: false, // 不删除源文件
          minRatio: 0.8,
          algorithm: "gzip",
        })
      );
    }
    const oneOfsMap = config.module.rule("less").oneOfs.store;
    oneOfsMap.forEach((item) => {
      item
        .use("style-resources-loader")
        .loader("style-resources-loader")
        .options({
          patterns: [
            "./src/styles/varibles.less",
            "./src/styles/common.less",
            "./src/theme/compileFiles/defaultTheme.less",
          ],
        })
        .end();
    });
    //修复 HMR(热更新)失效
    config.resolve.symlinks(true).end();
    //配置开发环境下的sourceMap粒度
    config
      .when(NODE_ENV === "development", (config) =>
        config.devtool("inline-cheap-module-evel-source-map")
      )
      .end();
    //配置生产环境下的sourceMap粒度
    config
      .when(NODE_ENV === "production", (config) =>
        config.devtool("inline-cheap-module-source-map")
      )
      .end();
    //vue-loader
    config.module.rule("vue").use("vue-loader").loader("vue-loader").end();

    config.module
      .rule("images")
      .test(/\.(png|jpe?g|gif|svg|webp|woff2?|eot|ttf|otf)$/i)
      .use("url-loader")
      .loader("url-loader")
      .options({
        name: "[name]_[hash].[ext]",
        outputPath: "images/",
        limit: 100,
      })
      .end();
  },
  devServer: {
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: process.env.VUE_APP_TARGET,
        changeOrigin: true,
        ws: false,
        pathRewrite: {
          ["^" + process.env.VUE_APP_BASE_API]: "",
        },
      },
    },
  },
};
